<template>
    <el-container>
        <el-header height="100px">
            <div class="header">
                <div class="logo-class"><img src="../../assets/logo.png"/></div>
                <div class="header-info">书山有路勤为径，学海无涯苦作舟。</div>
                <div class="header-menu">
                    <el-menu
                        router
                        :default-active="this.$router.path"
                        class="el-menu-demo"
                        mode="horizontal"
                        text-color="#000"
                        active-text-color="#1A73E8"
                    >
                        <el-menu-item index="/index/main">首页</el-menu-item>
                        <el-menu-item index="/index/forum">论坛</el-menu-item>
                        <el-submenu index="3">
                            <template slot="title">我的</template>
                            <el-menu-item index="/index/description">个人信息</el-menu-item>
                            <el-menu-item index="/index/course">我的课程</el-menu-item>
                            <el-menu-item @click="exit">退出登录</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </div>
            </div>
        </el-header>
        <div>
            <router-view></router-view>
        </div>
        <my-bottom></my-bottom>
    </el-container>
</template>
<script>
import myBottom from '../../components/Footer.vue';

export default {
    components:{
        myBottom
    },
    data: function () {
        return {
            msg: "Hello World",
            data: localStorage.getItem("userinfo"),
            activeIndex: "1",
        };
    },
    methods: {
        async rep() {
            console.log("test");
            const reap = await this.$axios.get("/classes/one/1", {});
            console.log(reap);
        },
        exit() {
            localStorage.clear();
            this.$GLOBAL.tuiJianList=[];
            this.$router.replace("/");
        },
    },
};
</script>
<style scoped>
.el-header {
    background-color: #fff;
    text-align: start;
    border-bottom: 1px solid #ddd9d9;
}
.el-main {
    background-color: rgb(255, 255, 255);
    line-height:normal;
}
.header {
    height: 100%;
    display: flex;
    justify-content: flex-start;
}
.header-menu{
    flex: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.header-info{
    flex: 2;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.logo-class {
    height: 100%;
    flex: 1;
    padding-left: 100px;
}
.logo-class img {
    height: 100%;
}
</style>

